<template>
    <div id="my">
        <div id="top">
        <img src="static/img/wdlogo.jpg" id="portrait">
        <p id="username">18958067309</p>
        <p><img src="static/img/wddj.PNG" alt="" id="grade"></p>
        <div>
            <img src="static/img/yybf.PNG" alt="" class="my-left-icon">
                       <img src="static/img/wdfx.PNG" alt="" class="my-left-icon">
            <img src="static/img/wdsz.PNG" alt="" class="my-left-icon">  

        </div>
  <div id="signature">  
            <p>编辑你的个人签名</p>
            <p><span>6</span>关注   <span>0</span>粉丝  <span>0</span>为你打call</p>
        </div>
        <div id="function">  
         <img src="static/img/wodetb1.PNG" alt="">
         <img src="static/img/wodetb2.PNG" alt="">
         <img src="static/img/wodetb3.PNG" alt="">
         <img src="static/img/wodetb4.PNG" alt="">
         <img src="static/img/wodetb5.PNG" alt="">
         <img src="static/img/wodetb6.PNG" alt="">
         <img src="static/img/wodetb7.PNG" alt="">
         <img src="static/img/wodetb8.PNG" alt="">
        </div>

   </div>
   <img src="static/img/wdjiaocheng.PNG" alt="" id="course">
<div class="production">
			
		
		<nav id="nav">
			<ul>
				<li class="act">作品</li>
				<li>歌单</li>
				<li>歌词</li>
			</ul>
		</nav>
		<!--内容部分HTML代码-->
		<div id="container">
			<div class="tab">内容1</div>
			<div class="tab">内容2</div>
			<div class="tab">内容3</div>
		</div>
		</div>
</div>


</template>
<script>
			window.onload = function() {
				var nav = document.getElementById('nav');
				var oNav = nav.getElementsByTagName('li');
				var container = document.getElementById('container');
				var oDiv = container.getElementsByClassName('tab');
				for (var i = 0; i < oNav.length; i++) {
					oNav[i].index = i;
					oNav[i].onclick = function() {
						for (var i = 0; i < oNav.length; i++) {
							oNav[i].className = '';
							oDiv[i].style.display = "none";
						}
						this.className = 'act';
						oDiv[this.index].style.display = "block"
					}
					for (var m = 1; m < oNav.length; m++) {
						oNav[m].className = '';
						oDiv[m].style.display = "none";
					}
				}
			};
		</script>
<style>
/* 我的页面顶部 */
#signature{
    position: absolute;
    top: 2rem;
    margin-top:.5rem;width: 100%;
}
#signature p:nth-child(1) {
   margin-right: .3rem;
    margin-left: .3rem;
    font-size: .26rem;
    color: #8A8A8A;
    margin-bottom: .1rem;
    padding-bottom: .1rem;
    border-bottom: 1px solid #8A8A8A;
}
#signature p:nth-child(2) {
   margin-top: .25rem;
     font-size: .32rem;
    color: #8E8E8E;
}
#signature span{
    font-size: .5rem;
     margin-left: .3rem; 
       color: #ffffff;
}
#portrait{
    float: left;
    margin-top: .5rem;
    margin-left: .3rem;
}
        .my-left-icon{
            margin-top: .5rem;
            width: .5rem;
            float: right;
            margin-right: .3rem;
        }
        #grade{
            width: .7rem;
            float: left;
           margin-top: 1.1rem;
           /* margin-left: .2rem; */
            }
    #username{
        width: .1rem;
         float: left;
          margin-top: .5rem;
          font-size: .5rem;
          color: #ffffff;
          margin-left: .2rem;
    }
   
    #top{
        background: #2D2D2D;
        height: 8rem;
        margin-top: -.5rem;
        position: relative;
    }

/* 我的功能部分 */
#function{
    width: 95%;
    height: 3.5rem;
    background: #202020;
     position: absolute;
    top: 4.25rem;
     margin-left: .25rem;
     border-top-left-radius:.3rem;
border-top-right-radius:.3rem;
margin-top: .2rem;
}
#function img{
width: 1rem;
width: 1rem;

margin: 0 .5rem;
margin-top: .4rem;
margin-bottom: .4rem;
}
#course{
width: 100%;
}
/* 我的作品、歌单、歌词部分 */
				
    .production{
    background:#202020 ;
    margin: -.3rem;
    width: 100%;
    margin-left: .0rem;
}
nav ul{
    text-align: center;
}
			nav li {
				display: inline-block;
				/* width: 24%; */
				text-decoration: none;
				/* margin-left: .5rem;
                margin-right: .5rem; */
                padding: 0 .9rem .3rem;
                
                color: #9D905C;
                font-size: .5rem;
               
			}
			.tab {
				height: 16.5rem;
                background: #202020;
			}
            .act{
 border-bottom: 3px solid #9D905C;
            }

            
</style>